<template>
    <div>
        <van-picker
            title="修改性别"
            show-toolbar
            :columns="columns"
            :default-index="defaultIndex"
            @confirm="onConfirm"
            @cancel="$emit('close')"
            @change="onChange"
        />
    </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
    components: {},
    props: {
        // user.gender  0 / 1
        value: {
            type: Number,
            required: true
        }
    },
    data () {
        return {
            columns: ['男', '女'],
            defaultIndex: this.value
        }
    },
    created () { },
    computed: {},
    methods: {
        // 选项改变时获取到选中的 index
        onChange (picker, value, index) {
            this.defaultIndex = index
        },
        async onConfirm () {
            this.$toast.loading({
                message: '修改中...',
                forbidClick: true
            })
            await updateUserProfile({
                gender: this.defaultIndex
            })
            // 修改父组件的 gender
            this.$emit('input', this.defaultIndex)

            this.$emit('close')
            this.$toast.success('修改成功!')
        }
    },
    watch: {}
}
</script>

<style scoped>
</style>
